<template>
    <div style="background: #fff;padding:12px;width:500px;margin:0 auto;">
        <great-card>
            <template v-slot:header>
                Here might be a page title
            </template>
            <template v-slot:body>
                <p>这是第一行</p>
            </template>
            <template v-slot:footer>
                <p>Here's some contact info</p>
            </template>
        </great-card>
        <great-card>
            <template #header>
                Here might be a page title
            </template>
            <template #body>
                <p>这是第二行</p>
            </template>
            <template #footer>
                <p>Here's some contact info</p>
            </template>
        </great-card>
        <great-card>
            <template #header>
                Here might be a page title
            </template>
            <template #body>
                <p>这是第三行</p>
            </template>
            <template #footer>
                <p>Here's some contact info</p>
            </template>
        </great-card>
    </div>
</template>

<script>
    export default {
        name: "card-demo01",
        created() {
        }
    }
</script>

<style scoped>

</style>
